import * as mars3d from "mars3d"
import { toRaw } from 'vue';

export const useFixedRoute = (_graphicLayer) => {
  let graphicLayer: any = null

  const eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中
  let fixedRoute: any = null
  
  const initFixedRoute = () => {
    // 解除响应式，代码中注意所有和mars3d 相关的 矢量数据 、矢量图层等不要双向绑定
    graphicLayer = toRaw(_graphicLayer.value); 
    
    fixedRoute = new mars3d.graphic.FixedRoute({
      name: "步行路线",
      position: {
        type: "time", // 时序动态坐标
        speed: 200,
        pauseTime: 0.5,
        list: [[121.428861, 30.988818, 0], [121.425194, 30.987694, 0]]
      },
      flyTo: false,
      autoStop: true, // 到达终点自动停止
      frameRate: 1,
      clockLoop: false, // 循环播放
      camera: {
        type: "gs",
        radius: 300
      },
      model: {
        url: "https://data.mars3d.cn/gltf/mars/man/walk.gltf",
        minimumPixelSize: 50,
        clampToGround: true
      },
      circle: {
        radius: 10,
        materialType: mars3d.MaterialType.CircleWave,
        materialOptions: {
          color: "#ffff00",
          opacity: 0.3,
          speed: 10,
          count: 3,
          gradient: 0.1
        },
        clampToGround: true
      },
      polyline: {
        color: "#ffff00",
        width: 2
      }
    })
    graphicLayer.addGraphic(fixedRoute)
  
    // 显示popup
    // fixedRoute.openPopup()
  
    // ui面板信息展示
    fixedRoute.on(mars3d.EventType.change, (event) => {
      // 取实时信息，可以通过  fixedRoute.info
      eventTarget.fire("roamLineChange", event)
    })
  
    fixedRoute.on(mars3d.EventType.endItem, function (event) {
      console.log("已漫游过点：" + event.index, event)
    })
    fixedRoute.on(mars3d.EventType.end, function (event) {
      console.log("漫游结束", event)
      eventTarget.fire("endRoam")
    })
  }

  const onFixedRoute = () => {
    fixedRoute.start()
  }

  return {
    initFixedRoute,
    onFixedRoute
  }
}